﻿
@{
    //ViewBag.Title = "Reception";
    //Layout = "~/Views/Shared/_Layout_iframe.cshtml";
    Layout = null;
}
<h2>前台</h2>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 表单向导</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="~/assets/Hplus/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/assets/Hplus/css/font-awesome.min.css" rel="stylesheet" />
    <link href="~/assets/Hplus/css/plugins/iCheck/custom.css" rel="stylesheet" />
    <link href="~/assets/Hplus/css/plugins/steps/jquery.steps.css" rel="stylesheet">
    <link href="~/assets/Hplus/css/animate.min.css" rel="stylesheet">
    <link href="~/assets/Hplus/css/style.min.css?v=4.0.0" rel="stylesheet">
    <script src="/Assets/hplus/js/plugins/simditor/jquery.min.js"></script>
    <!--第三方扩展插件-->
    <script src="~/Assets/layui/extra/autocomplete.js"></script>
    <style>
        #form-p-1{
            margin-top:30px;
            margin-left :30px
            
        }
        .col-sm-6 {
            width: 1200px
        }

        #taocan {
            margin-top: 150px;
            margin-left: 400px;
        }

        /*#taocanp {
            margin-left: 24px;
        }*/

        .form-group1 {
            margin-left: 85px
        }

        .form-group1 {
            display: flex;
            gap: 10px; /* 按钮间距 */
            padding: 12px;
        }

            /* 基础按钮样式 */
            .form-group1 button {
                padding: 12px 24px;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s ease;
                text-transform: uppercase; /* 字母大写 */
                letter-spacing: 0.5px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

        /* 签约按钮主题 */
        #signButton {
            background-color: #409eff; /* 科技蓝 */
            color: white;
            box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
        }

            #signButton:hover {
                background-color: #337ecc;
                transform: translateY(-1px);
            }

            #signButton:active {
                transform: translateY(0);
            }

        /* 打印按钮主题 */
        #printButton {
            background-color: #f0f2f5; /* 浅灰 */
            color: #606266;
            border: 1px solid #dcdfe6;
        }

            #printButton:hover {
                background-color: #e4e7ed;
                color: #409eff;
            }

            #printButton:active {
                background-color: #d9dde5;
            }

        /* 禁用状态 */
        .form-group1 button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* 焦点状态 */
        .form-group1 button:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
        }

        .col-sm-8 {
            width: 1700px;
        }

        #form-p-0 {
            margin-left: 30px;
            margin-top: 30px;
        }

        .ibox {
            height: 900px;
        }

        .ibox-content {
            height: 1069px;
        }

        .content {
            height: 965px;
        }

        fieldset {
            overflow-y: auto; /* 为纵向内容溢出添加滚动条 */
            max-height: 100vh; /* 设置最大高度为视口高度 */
        }

        .form-group {
            margin-bottom: 20px;
        }

        fieldset {
            padding: 20px;
        }

        /* 控制输入框的宽度 */
        .form-control {
            width: 100%;
            height: 100% /* 设置宽度为100%，使其填充父元素 */
        }

            /* 控制输入框长度 */
            .form-control.short {
                width: 10%; /* 输入框宽度为60% */
            }

        .wrapper {
            padding: 20px;
        }

        /* 表单组优化 */
        .form-group {
            margin-bottom: 25px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
        }

        /* 标签样式 */
        label {
            width: 140px;
            /* margin-left:10px;*/
            text-align: right;
            margin-bottom: 0;
            font-weight: 500;
            color: #666;
        }

        .lb {
            font-size: 30px
        }
        /*   #Degree {
            margin-left: 15px
        }*/

        .form-control {
            width: 100%;
            max-width: 280px;
            font-size: 14px;
            line-height: 1.5;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            background-color: #f8f9fa;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }


        /* 短输入框样式 */
        .short {
            width: 200px;
        }

        /* 必填项标识 */
        .required::after {
            content: "*";
            color: #ff4d4f;
            margin-left: 4px;
        }

        /* 动态添加的宝宝信息块 */
        .baby-block {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            background: #f9f9f9;
            position: relative;
        }

        /* 添加按钮样式 */
        #addBabyBtn {
            margin: 10px 0;
            padding: 8px 20px;
            border-radius: 20px;
            background: #409eff;
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* ========== 单选按钮基础样式 ========== */
        input[type="radio"] {
            position: absolute; /* 隐藏原生输入框 */
            opacity: 0; /* 完全透明但保留可访问性 */
            width: 1px;
            height: 1px;
            margin: -1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
        }

        /* 自定义单选按钮容器 */
        .radio-container {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            margin: 4px 0;
        }

            /* 自定义单选按钮视觉元素 */
            .radio-container::before {
                content: "";
                display: inline-block;
                width: 20px;
                height: 20px;
                border: 2px solid #95a5a6; /* 默认边框颜色 */
                border-radius: 50%; /* 圆形 */
                background: #ffffff;
                transition: all 0.2s ease;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

        /* 选中状态 */
        input[type="radio"]:checked + .radio-container::before {
            border-color: #3498db; /* 选中边框颜色 */
            background: #3498db; /* 选中背景色 */
            box-shadow: 0 0 0 4px rgba(52,152,219,0.2); /* 外发光效果 */
        }

        /* 选中指示点 */
        input[type="radio"]:checked + .radio-container::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 5px;
            width: 10px;
            height: 10px;
            background: white; /* 中心白点 */
            border-radius: 50%;
        }

        /* 聚焦状态 */
        input[type="radio"]:focus-visible + .radio-container::before {
            outline: 2px solid #2ecc71; /* 无障碍焦点提示 */
            outline-offset: 2px;
        }

        /* 禁用状态 */
        input[type="radio"]:disabled + .radio-container {
            opacity: 0.6;
            cursor: not-allowed;
        }

            input[type="radio"]:disabled + .radio-container::before {
                background: #ecf0f1;
                border-color: #bdc3c7;
            }

        /* 步骤条样式优化 */
        .wizard > .steps li {
            width: 25%;
        }

        .wizard > .steps .current a {
            background: #409eff;
            border-radius: 4px;
        }


        /* 字段集滚动优化 */
        fieldset {
            max-height: 70vh;
            overflow-y: auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }

        /* 标题样式 */
        h2 {
            color: #333;
            border-bottom: 2px solid #409eff;
            padding-bottom: 8px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>产妇信息录入</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_wizard.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="form_wizard.html#">选项1</a>
                                </li>
                                <li>
                                    <a href="form_wizard.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        @*<h2>
                                带验证的表单向导
                            </h2>
                            <p>
                                下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
                            </p>*@

                        <form id="form" action="/FrontDesk/Insert.cshtml" method="post" class="wizard-big">
                            <h1>产妇和宝宝信息</h1>
                            <fieldset>
                                <h2>产妇信息</h2>
                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="form-group">
                                            <label>产妇名 *</label>
                                            <input id="ParturientName" name="ParturientName" type="text" class="form-control required short" lay-verify="required">
                                        </div>
                                        <div class="form-group">
                                            <label>年龄 * </label>
                                            <input id="ParturientAge" name="ParturientAge" type="text" class="form-control required short" lay-verify="required">
                                            <label>电话 *</label>
                                            <input id="ParturientPhone" name="ParturientPhone" type="text" class="form-control required short" lay-verify="required">
                                            <label>住址 *</label>
                                            <input id="Address" name="Address" type="text" class="form-control required short" lay-verify="required">
                                            <label>身份证号 *</label>
                                            <input id="CardId" name="CardId" type="text" class="form-control required short" lay-verify="required">
                                        </div>
                                            <div class="form-group">
                                                <label>学历 *</label>
                                                <select id="Degree" name="Degree" class="form-control required short" lay-verify="required">
                                                    <option value="">请选择学历</option>
                                                    <option value="本科">本科</option>
                                                    <option value="硕士">硕士</option>
                                                    <option value="博士">博士</option>
                                                    <option value="专科">专科</option>
                                                 
                                                    <option value="保密">保密</option>
                                                </select>
                                                <label>紧急联系人 *</label>
                                                <input id="EmergencyContacts" name="EmergencyContacts" type="text" class="form-control required short" lay-verify="required">
                                                <label>紧急联系人电话 *</label>
                                                <input id="EmergencyContactsPhone" name="EmergencyContactsPhone" type="text" class="form-control required short" lay-verify="required">
                                                <label>围产医院 *</label>
                                                <input id="PerinatalHospitals" name="PerinatalHospitals" type="text" class="form-control required short" lay-verify="required">
                                            </div>
                                            <div class="form-group">
                                                <label> 产妇基本信息</label>
                                                <textarea id="ParturientInfo" name="ParturientInfo" class="form-control required short" lay-verify="required"  rows="4" style="width: 100%; height: 50px;" placeholder="请输入产妇的基本信息..."></textarea>
                                            </div>
                                    
                                        <div class="form-group">
                                            <h2>宝宝信息</h2>
                                            <input type="button" value="+" id="addBabyBtn" class="btn btn-primary" />
                                        </div>
                                        <div id="babyInfoContainer">
                                            @*动态添加的宝宝信息会放在这里*@
                                        </div>
                                        <div class="form-group">
                                            <h2>业务员</h2>

                                            <input id="Salesman" name="Salesman" type="text" class="form-control required short" lay-verify="sa">
                                            <input id="SalesmanNumbers" name="SalesmanNumbers" type="hidden" lay-verify="sa" />
                                        </div>
                                        <script>
                                            // 动态添加宝宝信息逻辑
                                            let babyIndex = 0;  // 全局索引计数器

                                            document.getElementById("addBabyBtn").addEventListener("click", function () {
                                                const container = document.getElementById("babyInfoContainer");

                                                // 创建宝宝信息区块
                                                const babySection = document.createElement("div");
                                                babySection.className = "baby-section";
                                                babySection.innerHTML = `
                                                                                                                                                                                                                                        <hr>
                                                                                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                                                                                <label>婴儿名 *</label>
                                                                                                                                                                                                                                                                                <input name="Babies[${babyIndex}].BabyName" type="text" class="form-control required">
                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                                                                                <label>婴儿性别 *</label>
                                                                                                                                                                                                                                                                                <label><input type="radio" name="Babies[${babyIndex}].BabySex" value="0" required>  <span class="radio-container">男</span></label>
                                                                                                                                                                                                                                                                                <label><input type="radio" name="Babies[${babyIndex}].BabySex" value="1" required>  <span class="radio-container">女</span></label>
                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                                                                                <label>婴儿身高(cm) *</label>
                                                                                                                                                                                                                                                                                <input name="Babies[${babyIndex}].BabyHeight" type="number" step="0.1" class="form-control required">
                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                                                                                <label>婴儿体重(kg) *</label>
                                                                                                                                                                                                                                                                                <input name="Babies[${babyIndex}].BabyWeight" type="number" step="0.1" class="form-control required">
                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                                                                                <label>婴儿乳名 *</label>
                                                                                                                                                                                                                                                                                <input name="Babies[${babyIndex}].Nickname" type="text" class="form-control required">
                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                                                                                <label>出生时间 *</label>
                                                                                                                                                                                                                                                                                <input name="Babies[${babyIndex}].Birthday" type="datetime-local" class="form-control required">
                                                                                                                                                                                                                                                                            </div>

                                                                                                                                                                                                                                                                            <div class="form-group">
                                                                                                                                                                                                                                                                                <label>出生类型 *</label>
                                                                                                                                                                                                                                                                                <label><input type="radio" name="Babies[${babyIndex}].BirthType" value="0" required> <span class="radio-container">剖腹产</span></label>
                                                                                                                                                                                                                                                                                <label><input type="radio" name="Babies[${babyIndex}].BirthType" value="1" required> <span class="radio-container">顺产</span></label>
                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                        `;

                                                container.appendChild(babySection);
                                                babyIndex++;  // 索引递增
                                            });
                                        </script>
                                    </div>

                                </div>
                            </fieldset>
                            <h1>合同</h1>
                            <fieldset>
                                <h2>合同信息</h2>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div id="taocan">
                                            <div class="form-group">
                                                <label>套餐 *</label>
                                                <select id="PackageId" name="PackageId" class="form-control required " lay-verify="required">
                                                    <option value="">请选择套餐</option>
                                                    @foreach (var package in ViewBag.Packages as List<JinfuyuanProject.Entity.Package>)
                                                    {
                                                        <option value="@package.Id" data-price="@package.PackagePrice">@package.PackageName</option>
                                                    }
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label>押金 *</label>
                                                <input id="Deposit" name="Deposit" type="text" class="form-control required ">
                                            </div>
                                            <div class="form-group">
                                                <label id="taocanp">套餐金额 :</label>
                                                <span id="packageAmount">0.00</span> 元
                                                <input id="PackagePrice" name="PackagePrice" type="hidden" class="form-control required " />
                                            </div>
                                            <div class="form-group1">
                                                <button id="signButton">签约</button>
                                                <button id="PrintButton">合同打印</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <!--<h1>房间</h1>
                            <fieldset>
                                <h2>房间信息</h2>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>房间 *</label>-->
                                            @*<input id="name" name="name" type="text" class="form-control required short">*@
                                        <!--</div>
                                    </div>
                                </div>
                            </fieldset>

                            <h1>完成</h1>
                            <fieldset>
                                <h2>条款</h2>-->
                                @*<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
                                    <label for="acceptTerms">我同意注册条款</label>*@

                            <!--</fieldset>-->
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <script src="~/assets/Hplus/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="~/assets/Hplus/js/content.min.js?v=1.0.0"></script>
    <script src="~/assets/Hplus/js/plugins/staps/jquery.steps.min.js"></script>
    <script src="~/assets/Hplus/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/assets/Hplus/js/plugins/validate/messages_zh.min.js"></script>
    <script>
        $(document).ready(function () { $("#wizard").steps(); $("#form").steps({ bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) { if (currentIndex > newIndex) { return true } if (newIndex === 3 && Number($("#age").val()) < 18) { return false } var form = $(this); if (currentIndex < newIndex) { $(".body:eq(" + newIndex + ") label.error", form).remove(); $(".body:eq(" + newIndex + ") .error", form).removeClass("error") } form.validate().settings.ignore = ":disabled,:hidden"; return form.valid() }, onStepChanged: function (event, currentIndex, priorIndex) { if (currentIndex === 2 && Number($("#age").val()) >= 18) { $(this).steps("next") } if (currentIndex === 2 && priorIndex === 3) { $(this).steps("previous") } }, onFinishing: function (event, currentIndex) { var form = $(this); form.validate().settings.ignore = ":disabled"; return form.valid() }, onFinished: function (event, currentIndex) { var form = $(this); form.submit(); window.location.href = "https://localhost:44333/home/index"; } }).validate({ errorPlacement: function (error, element) { element.before(error) }, rules: { confirm: { equalTo: "#password" } } }) });
        //$(document).ready(function () {
            // 在这里初始化自动完成或其他函数
        layui.use(['form','autocomplete'], function () {
            var autocomplete = layui.autocomplete;
            var form = layui.form;
            form.verify({
                required: function (value) {
                    if (value.trim() === '') {
                        return '必填项不能为空';
                    }
                }
            });
            $('#signButton').on('click', function (e) {
                e.preventDefault(); // 阻止默认的点击事件
                // 获取选中的套餐名称和价格
                var selectedOption = $('#PackageId').find('option:selected');
                var packageName = selectedOption.text();
                var packagePrice = $('#PackagePrice').val();
                // 弹出确认框，显示套餐和价格
                var isConfirmed = confirm("您确定要提交吗？您选择的套餐是 " + packageName + "，价格为 " + packagePrice + " 元。");
                if (isConfirmed) {
                    // 手动触发 Layui 验证
                    layui.form.validate('#form');
                    $('#signButton').hide();
                    // 验证通过后提交表单
                    if ($('#form').valid()) { // 如果使用 jQuery Validation
                        $.ajax({
                            url: '/FrontDesk/Insert',
                            method: 'POST',
                            data: $('#form').serialize(),
                        });
                    }
                } else {
                    alert("提交已取消");
                }
            });
            $('#PrintButton').on('click', function (e) {
                e.preventDefault();
                if (confirm("您确定要打印合同吗？")) {
                    // 直接跳转到下载接口（自动携带表单参数）
                    window.location.href = '/FrontDesk/DownloadContract?' + $('#form').serialize();
                }
            });
                autocomplete.render({
                    elem: $('#ParturientName'),
                    caches: false,
                    url: '/FrontDesk/SerachParturientName?ParturientName=' + $('#ParturientName').val(),
                    template_val: '{{d.Id}}',
                    template_txt: '{{d.ParturientName+d.ParturientPhone }}',
                    onselect: function (res) {
                        console.log(res)
                        $("#ParturientName").val(res.ParturientName)
                        $("#ParturientAge").val(res.ParturientAge)
                        $("#ParturientPhone").val(res.ParturientPhone)
                        $("#Degree").val(res.Degree)
                        $("#EmergencyContacts").val(res.EmergencyContacts)
                        $("#EmergencyContactsPhone").val(res.EmergencyContactsPhone)
                        $("#PerinatalHospitals").val(res.PerinatalHospitals)
                        $("#Salesman").val(res.Salesman)
                        $("#SalesmanNumbers").val(res.SalesmanNumbers)
                        $("#Address").val(res.Address)
                        $("#ParturientInfo").val(res.ParturientInfo)
                        $('.layui-form-autocomplete dl').empty(); 
                        

                    },
                })

            autocomplete.init();
        })
        // 套餐金额动态显示
        $(document).ready(function () {
            // 监听下拉框变化事件
            $('#PackageId').on('change', function () {
                // 获取选中的option

                const selectedOption = $(this).find('option:selected');
                // 提取data-price属性，默认值0.00
                const price = selectedOption.data('price') || '0.00';
                // 更新显示金额（保留两位小数）
                $('#packageAmount').text(parseFloat(price).toFixed(2));
                $('#PackagePrice').val(parseFloat(price).toFixed(2));

            });

        });
       /* });*/

    </script>
    <script type="text/javascript" src="https://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
